<template>
  <section class="banner-slide">
    <VueSlickCarousel v-bind="settings">
      <div class="banner-area slide-bg1 bg_cover d-flex align-items-center">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-lg-10">
              <div class="banner-content text-center">
                <span data-animation="fadeInDown" data-delay="1s"
                  >Welcome to NER & RE</span
                >
                <h3 data-animation="fadeInDown" data-delay=".1s" class="title">
                  古文实体以及实体关系的抽取
                </h3>
                <div
                  data-animation="fadeInUp"
                  data-delay="1s"
                  class="main-btn"
                  @click="toRouter()"
                >
                  去輸入
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="banner-area slide-bg2 bg_cover d-flex align-items-center">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-lg-10">
              <div class="banner-content text-center">
                <span data-animation="fadeInDown" data-delay="1s"
                  >Welcome to NER & RE</span
                >
                <h3 data-animation="fadeInDown" data-delay=".1s" class="title">
                  古文实体以及实体关系的抽取
                </h3>
                <div
                  style="
                    padding: 10px 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                  data-animation="fadeInUp"
                  data-delay="1s"
                  class="main-btn"
                  @click="toRouter()"
                >
                  去輸入
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </VueSlickCarousel>
  </section>
</template>

<script>
import VueSlickCarousel from "vue-slick-carousel";
import "vue-slick-carousel/dist/vue-slick-carousel.css";
export default {
  name: "SliderOther",
  components: { VueSlickCarousel },
  data() {
    return {
      username: "",
      password: "",
      settings: {
        arrows: false,
        autoplay: true
      }
    };
  },

  methods: {
    toRouter() {
      if (this.username === "") {
        this.$confirm("请先去登陆", "提示", {
          distinguishCancelAndClose: true,
          confirmButtonText: "確定",
          cancelButtonText: "取消"
        })
          .then(() => {
            window.location.href = "/login";
          })
          .catch(action => {
            console.log("取消");
          });
      } else {
        this.$router.push("/search");
      }
    }
  }
};
</script>

<style scoped></style>
